.modal{
  z-index: 10;
  @include position(fixed);
  transition: all .3s; // 过渡效果
  .mask{
    @include position(fixed);
    background-color: $colorI;
    opacity: 0.5;
  }
  /* vue过渡样式*/
  &.slide-enter-active{
    top:0;
  }
  &.slide-leave-active{
    top:-100%;
  }
  &.slide-enter{
    top:-100%;
  }
  .modal-dialog{
    @include position(absolute,40%,50%,660px,auto); // 绝对定位 位置top40% left50% 大小width660px height自动填充
    background-color: $colorG;
    transform: translate(-50%,-50%); // css3的新特性:水平垂直居中
    .modal-header{
      height: 50px;
      line-height: 50px;
      background-color: $colorJ;
      padding: 0 25px;
      font-size: $fontI;
      .icon-close{
        @include positionImg(absolute,23px,25px,14px,14px,'/imgs/icon-close.png');
        //transition: transform .1s;
        &:hover{
          transform: scale(1.5); // 动画效果:放大1.5倍
        }
      }
    }
    .modal-body{
      padding: 42px 40px 54px;
      font-size: $fontJ;
    }
    .modal-footer{
      height: 80px;
      line-height: 80px;
      text-align: center;
      //background-color: $colorJ;
    }
  }
}